<template>
  <div class=''>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin-top:15px">
      <el-row>
        <el-col>
          <el-button type="primary" @click="addRoles">添加角色</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table border style="margin-top:15px" :data="rolesList">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" icon="el-icon-edit" round @click="editRoles(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete" round @click="del(scope.row.id)"></el-button>
              <el-button type="warning" icon="el-icon-star-off" round @click="setRights(scope.row.id)"></el-button>

            </div>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <!-- 添加角色弹框 -->
    <el-dialog title="添加用户" :visible.sync="addRolesDia" width="350px">
      <el-form :model="addRolesForm">
        <el-form-item label="角色名称">
          <el-input v-model="addRolesForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addRolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRolesDia = false">取 消</el-button>
        <el-button type="primary" @click="addRolesDiaOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加角色弹框 -->
    <el-dialog title="修改用户" :visible.sync="editRolesDia" width="350px">
      <el-form :model="addRolesForm">
        <el-form-item label="角色名称">
          <el-input v-model="addRolesForm.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addRolesForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editRolesDia = false">取 消</el-button>
        <el-button type="primary" @click="editRolesDiaOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限弹框 -->
    <el-dialog title="分配权限" :visible.sync="setRightsDia" width="30%" :before-close="handleClose">
      <!-- tree  树形 -->
      <el-tree ref="RightTreeRef" :data="treeData" show-checkbox node-key="id" default-expand-all
        :default-checked-keys="checkedAll" :props="defaultProps">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightsDia = false">取 消</el-button>
        <el-button type="primary" @click="setRightsDiaOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


export default {
  data() {
    return {
      rolesList: [],        //角色列表的数据
      addRolesDia: false,   //添加弹框
      editRolesDia: false,  //编辑弹框
      setRightsDia: false,  //分类权限弹框
      treeData: [],         //tree的数据
      checkedAll: [],       //默认选中
      defaultProps: {       // 需要渲染的  数据  树的  
        label: "authName",
        children: "children"
      },
      addRolesForm: {          //form  的数据
        roleName: '',
        roleDesc: ''
      },
      rids: "",

    };
  },
  created() {
    this.getRolesList()
  },
  methods: {
    // 渲染列表
    async getRolesList() {
      const res = await this.$API.getUserRolesListApi()
      console.log("角色列表", res);
      this.rolesList = res
    },
    // 添加用户
    addRoles() {
      // 显示弹框
      this.addRolesDia = true
    },
    // 添加用户  确定
    async addRolesDiaOk() {
      // 请求添加接口
      await this.$API.addRolesApi(this.addRolesForm)
      console.log("tinajiayhu", this.addRolesForm);
      // 更新
      this.getRolesList()
      this.addRolesForm = ''
      // 隐藏
      this.addRolesDia = false
    },
    // 编辑用户
    editRoles(row) {
      this.editRolesDia = true
      this.addRolesForm = row

    },
    // 编辑用户的   确定
    editRolesDiaOk() {
      // 调用接口
    },
    // 删除用户
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$API.delRolesApi(id)
        this.getRolesList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 分配权限
    async setRights(row) {

      this.rids = row.id
      const res = await this.$API.getRightsListApi("tree")
      console.log("树", res);
      this.treeData = res
      this.setRightsDia = true
      // 递归获取
      this.getCheckedIdAll(row, this.checkedAll);
      console.log("当前角色所有权限", this.checkedAll);
      this.isSetRightDia = true;
    },
    getCheckedIdAll(row, checkedAll) {
      if (!row.children) {
        return checkedAll.push(row.id);
      }
      row.children.forEach((item) => {
        this.getCheckedIdAll(item, checkedAll);
      });
    },
    // 分配权限的  关闭
    handleClose() {
      this.setRightsDia = false
      this.checkedAll = [];
    },
    // 分配权限的 确定
    async setRightsDiaOk() {
      const allchecked = this.$refs.RightTreeRef.getCheckedKeys();

      // 半选id
      const halfchecked = this.$refs.RightTreeRef.getHalfCheckedKeys();

      console.log("全选：", allchecked);
      console.log("半选：", halfchecked);

      // 将上面的全选和半选合并
      const mergeCheckedKeysArr = [...allchecked, ...halfchecked];

      // 合并转换成字符串 json
      const checedArrStr = mergeCheckedKeysArr.join(",");

      // 掉角色授权的
      const res = await this.$API.setRightsToRoleApi(this.rids, checedArrStr);
      console.log("更新", res);
      this.getRolesList();
      this.setRightsDia = false
    },
  },
  components: {}
};
</script>

<style lang='scss'>
</style>
